<!DOCTYPE html>
<html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ page pageEncoding="UTF-8"%>
<%@ page language="java" isELIgnored="false"%>

<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script type="text/javascript" src="/static/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
	function listEnt(ent, cb) {
		var future = $.ajax({
			type : 'GET',
			url : '/test/list/' + ent,
			dataType : 'json'
		});
		future.success(cb || function(data) {
			console.log(data)
		});
		return future;
	}

	function list(cb, cursor) {
		var future = $.ajax({
			type : 'GET',
			url : '/test',
			dataType : 'json',
			data : 'cursor=' + (cursor || "")
		});
		future.success(cb || render);
		return future;
	}

	function add(name, cursor, cb) {
		var ft = $.ajax({
			type : 'PUT',
			url : '/test',
			dataType : 'json',
			data : 'name=' + name + '&cursor=' + (cursor || "")
		});
		ft.success(cb || render);
		return ft;
	}

	function upd(id, name, cb) {
		var ft = $.ajax({
			type : 'POST',
			url : '/test/' + id,
			dataType : 'json',
			data : 'name=' + name + '&cursor=' + (cursor || "")
		});
		ft.success(cb || render);
		return ft;
	}

	function del(id, cursor, cb) {
		var ft = $.ajax({
			type : 'DELETE',
			url : '/test/' + id,
			data : 'cursor=' + (cursor || ""),
			dataType : 'json'
		});
		ft.success(cb || render);
		return ft;
	}

	function get(id, cb) {
		var ft = $.ajax({
			type : 'GET',
			url : '/test/' + id,
			dataType : 'json'
		});
		ft.success(cb || render);
		return ft;
	}

	function renderTr(chd) {
		return "<tr>" + "<td>" + chd.name + "</td>"
				+ "<td><a href='#' onclick='del(\"" + chd.id + "\",\"" + chd.cursor + "\")'>" + chd.id
				+ "</td>" + "<td>" + chd.created + "</td>" + "</tr>";
	}

	function render(data, status, io, rd) {
		$('tr').remove();
		$('tbody').html(function() {
			return $.map(data.children, rd || renderTr).join("");
		});
	}
</script>
</head>
<body>
	Teste
	<table style="width: 100%">
		<thead></thead>
		<tbody>
			<c:forEach items="${children}" var="child">
				<tr>
					<td>${fn:escapeXml(child.name)}</td>
					<td><a href="#" onclick="del('${child.id}','${child.cursor}')">${child.id}</a>
					</td>
					<td>${child.created.time}</td>
				</tr>
			</c:forEach>
		</tbody>
	</table>
</body>